<template>
  <el-dialog class="assign-role" title="分配角色" :visible="showRoleDialog" @open="RoleList" @close="handleClose">
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <el-checkbox-group v-model="roleIds" :v-loading="loading">
      <el-checkbox v-for="item in localRoleList" :key="item.id" :label="item.id">
        {{ item.name }}
      </el-checkbox>
      <!-- 选项 -->
    </el-checkbox-group>

    <template #footer>
      <div style="text-align: right">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { reqGetRoleList } from '@/api/setting.js'
import { getDetailInfo } from '@/api/user'
import { reqAssignRoles } from '@/api/employees'
export default {
  name: 'AssignRole',
  props: {
    // 弹窗显示
    showRoleDialog: {
      type: Boolean,
      required: true
    },
    // 用户id
    userId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      // 储存的角色数据
      localRoleList: [],
      // 储存的选中的角色id
      roleIds: [],
      // loading
      loading: false
    }
  },
  methods: {
    // 功能1.--- 取消按钮
    handleClose () {
      this.$emit('update:showRoleDialog', false)
    },
    // 功能2.--- 加载角色类别数据
    async RoleList () {
      try {
        // 获取用户基本信息，取出当前用户已有的权限id
        const info = await getDetailInfo(this.userId)
        // 如果获取成功
        if (info.code === 10000) {
          // 把用户已有的权限id赋值给储存用户权限id的数组
          this.roleIds = info.data.roleIds
        } else {
          this.$message.error(info.message)
        }
      } catch {
        this.$message.error('获取用户基本信息失败')
      }
      try {
        this.loading = true

        // 调用接口，获取角色数据
        const ret = await reqGetRoleList({
          page: 1,
          pagesize: 10000
        })
        // 如果获取成功
        if (ret.code === 10000) {
          // 把数据赋值给储存角色的数组
          this.localRoleList = ret.data.rows
        } else {
          this.$message.error(ret.message)
        }
      } catch {
        this.$message.error('获取角色列表失败')
      } finally {
        this.loading = false
      }
    },
    // 功能3.---点击确定按钮，保存员工角色
    async handleSubmit () {
      try {
        // 调用接口获取到
        const ret = await reqAssignRoles({
          id: this.userId,
          roleIds: this.roleIds
        })
        if (ret.code === 10000) {
          // console.log(ret)
          // 分配成功
          // 1.提示
          this.$message.success('给员工分配角色成功')
          // 2.关闭弹窗
          this.$emit('update:showRoleDialog', false)
        } else {
          this.$message.error(ret.message)
        }
      } catch {
        this.$message.error('给用户分配角色失败')
      }
    }
  }
}
</script>
